<template>
  <view class="content">
    <text class="title">语法</text>
	<image v-bind:class="className" src="/static/logo.png" style="width: 120rpx; height: 120rpx;"></image>
    <text class="hello-text">Hello</text>
    <view>{{ number + 1 }}</view>
    <view>{{ ok ? 'YES' : 'NO' }}</view>
    <view>{{ message.split('').reverse().join('') }}</view>
    <view v-if="!raining">今天天气真好</view>
    <view v-if="state === 'vue'">state的值是Vue</view>
    <view>State is {{ state === 'vue' ? 'vue' : 'App' }}</view>
    <view v-if="state === 'vue'">uni-app</view>
    <view v-else-if="state === 'html'">HTML</view>
    <view v-else>APP</view>
    <view v-for="(item, index) in arr" :key="item.id" style="color: #ff0000;">
      {{ item }}
    </view>
    <view v-for="(num, index) in 6" :key="index" style="color: #00ff00;">
      <view :class="'list-' + index % 2">{{ index }}</view>
    </view>
    <view v-for="(value, name, index) in object" :key="index">
      {{ index }}.{{ name }}:{{ value }}
    </view>
    <view v-for="item in arrObj" :key="item.id" style="color: #0000ff;">
      {{ item.id }}:{{ item.name }}
    </view>
    <view class="red-box"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      arr: ['{ "id": 1, "name": "uni-app" }', '{ "id": 2, "name": "HTML" }'],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      },
      number: 1,
      ok: true,
      message: 'Hello Vue!',
      raining: false,
      state: 'vue',
      arrObj: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' }
      ]
    };
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.hello-text {
  font-size: 32rpx;
  margin-bottom: 10rpx;
}
.red-box {
  width: 200rpx;
  height: 200rpx;
  background-color: red;
  margin-top: 20rpx;
}
</style>